<template>
	<view>
		<Header :title="'蜂箱详情'" style="z-index: 99999;"></Header>
	
		<view class="content">
			<image src="@/static/mifen16.png" mode="aspectFill" style="width: 690rpx;height: 250rpx;margin-left: 50rpx;">
			</image>
			<view class="img_box">
				<view class="img_boxsun">
					<image src="@/static/juxin.png" mode="widthFix" class="img_juxin">
					</image>
					<view class="img_text">{{mood.farmName}}{{mood.varietyName}}</view>
				</view>
	
			</view>
			<view class="fosterBox">
				<!-- <video class="video" autoplay controls muted
					:src="mood.farmMonitoringList[0].url"></video> -->
					<view class="" v-if="!mood.monitoring" style="width: 100%;height: 100%;">
						<video  v-if="mood.type==0" class="video" autoplay controls muted
							:src="mood.videoList[0].imgUrl" ></video>
							<image v-else :src="mood.videoList[0].imgUrl" mode="aspectFill" class="video" ></image>
					</view>
					<video  v-else class="video" autoplay controls muted
						:src="mood.monitoring"></video>	
			</view>
			<view class="swpei_box">
				<image class="changdi" v-for="item in mood.ossImgsList"
					:src="item.imgUrl" @click="liulan(item)"
					mode="aspectFill" ></image>
			</view>
			<view class="roundList">
				<view class="roundItem">
					<view class="roundBtn_big">
						<view class="roundBtn"></view>
						<view class="roundText">
							纯
						</view>
					</view>
					<view class="tit">
						纯正天然
					</view>
				</view>
	
				<view class="roundItem">
					<view class="roundBtn_big">
						<view class="roundBtn"></view>
						<view class="roundText">
							甄
						</view>
					</view>
					<view class="tit">
						甄选好蜜
					</view>
				</view>
				<view class="roundItem">
					<view class="roundBtn_big">
						<view class="roundBtn"></view>
						<view class="roundText">
							野
						</view>
					</view>
					<view class="tit">
						野生饲养
					</view>
				</view>
			</view>
	
			<view class="infoBox">
				<view class="btnGround">
					<view class="btnMonth" @click="selectBtn(12)" :class="{'active':selectMonth==12}">
						12月
					</view>
					<view class="btnMonth" @click="selectBtn(24)" :class="{'active':selectMonth==24}">
						24月
					</view>
				</view>
				<view class="infoItem">
					<view class="title1">
						期间可获得以下产品(饲养费{{mood.rearMonthMoney}}元/月)
					</view>
					<view class="fengmi">
						<image class="img" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/ebe9f2ce1b002c30ca569cfaeeed48a.png" mode="aspectFill"></image>
						<view class="miMain">
							<view class="tit2">
								
								{{mood.varietyName}}
							</view>
							<view class="kgBox">
								<view class="kg">
									{{selectMonth==12?'10斤':'20斤'}}
								</view>
								<view class="baodi">
									保底
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;color: #F5D8AC;font-weight: 600;">享受权益：</view>
				<!-- <view style="margin-top: 20rpx;color: #F5D8AC;">
					<text>
						🌟只需 {{mood.money}} 元认养一个蜂箱🐝，每年竟然能产出 10 斤价值 {{price}} 元一斤的顶级{{priceName}}🍯！这意味着光是{{priceName}}就价值 {{price*number}} 元啦！😎
						💖而且，惊喜还不止于此！每年这个蜂箱还能生成 3 个子蜂箱，你可以售卖给他人，从中获得一笔可观的收益
						🤗认养蜂箱，不仅是一次投资，更是一种与大自然亲密接触的美好体验。感受蜜蜂的辛勤，见证生命的奇迹，还能为环保贡献一份力量。🌳
					</text>
				</view> -->
				
			</view>
			<view class="rixt_box">
				<view class="rixt_title">蜂箱介绍 </view>
				<rich-text :nodes="richText"></rich-text>
			</view>
			<view class="" style="height: 50rpx;">
			</view>
	
			<view class="buyBox">
				<view class="buyBtn" @click="toconfirm">立即{{titleKey}}</view>
			</view>
			<view class="" style="height: 120rpx;"></view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				xueShow: false,
				Show: false,
				number: 3,
				mood: [],
				id: '',
				selectMonth: 12,
				richText: '',
				cont: 0,
				navBarHeight: 0, //状态栏高度 + 导航栏44px
				shareId: '',
				pageNum: 1,
				msg: [],
				varietyId: '',
				varietyName: '',
				price:268,
				priceName:'百草蜜',
				titleKey:uni.getStorageSync('titleKey'),
				number:10,
				img:[
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2019%2F448%2F848%2F10491848844_778696738.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714555016&t=505725f41b0ff00cef0bd0efebc12a09',
					'https://img.mydigit.cn/forum/201907/17/140550ev6nawnvw9jn9j75.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2018%2F260%2F539%2F9193935062_778696738.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714555016&t=ff1ac32a613d64d48e7c98ca626bef02'
				],
				varietyId:'',
				parentId:'',
				subBeehiveId:''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.varietyId=e.varietyId
				this.cread()
			}
			// if(e.subBeehiveId&e.varietyId&e.farmId&e.shareId){
			// 		uni.setStorageSync('subBeehiveId',e.subBeehiveId)
			// 		uni.setStorageSync('varietyId',e.varietyId)
			// 		uni.setStorageSync('farmId',e.farmId)
			// 		uni.setStorageSync('shareIdCode',e.shareId)
			// 		this.id = e.farmId
			// 		this.varietyId=e.varietyId
			// 		this.cread()
			// }
			if(e.scene){
				this.share(e.scene)
			}
			if(uni.getStorageSync('varietyId')&uni.getStorageSync('farmId')){
				this.id = uni.getStorageSync('farmId')
				this.varietyId=uni.getStorageSync('varietyId')
				this.cread()
			}
			if (e.fosterId & e.cont == '可销售') {
				this.parentId = e.fosterId
			}
			this.cont = e.cont
		
		},
		created() {
			this.setNavBarHeight()
		},
		components: {
			Header
		},
		methods: {
			async share(e) {
				//分享查询
				let res = await this.$api.request('farmer/app/subBeehive/'+e)
						uni.setStorageSync('subBeehiveId',e)
						uni.setStorageSync('varietyId',res.data.varietyId)
						uni.setStorageSync('farmId',res.data.farmId)
						uni.setStorageSync('shareIdCode',res.data.userId)
						this.id = res.data.farmId
						this.varietyId=res.data.varietyId
						this.cread()
			},
			liulan(e){
				uni.previewImage({
					urls: [e],
				});
			},
			// img(e) {
			// 	uni.previewImage({
			// 		urls: [e],
			// 	});
			// },
			// async jilv() {
			// 	//认养详情饲养记录
			// 	let res = await this.$api.request('manage/fosterRecord/list', 'get', {
			// 		id: this.varietyId,
			// 		pageNum: this.pageNum,
			// 	})
			// 	this.msg = res.data.list
			// 	this.Show = true
			// },
			async buyxue() {
				//续费购买
				let res = await this.$api.request('admin/renewOrder/client', 'post', {
					totalNum: this.number,
					totalPrice: this.number * this.mood.feedCost,
					fosterId: this.id
				})
				if (res.code == '200') {
					let mood = res.data.resExt.payOrder
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						timeStamp: mood.timeStamp, // 时间戳
						nonceStr: mood.nonceStr, // 随机字符串
						package: mood.attach,
						signType: mood.signType, // 签名算法
						paySign: mood.paySign, // 签名
						success: function(res) {
							uni.navigateTo({
								url: '/pages/index/success?cont=2'
							})
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					});
					
					
				}

			},
			valChange(e) {

			},
			async setNavBarHeight() {
				let that = this
				console.log(1)
				wx.getStorage({
					key: 'navBarHeight',

					success(res) {
						// 换算为rpx单位 

						that.navBarHeight = res.data * 2 + 10 + 'rpx'
						console.log(that.navBarHeight)
					}
				})

			},
			async cread() {
				//认养详情
				let res = await this.$api.request('manage/app/variety/getInfo','post',{varietyId:this.varietyId,farmId:this.id})
				this.mood = res.data
				// this.varietyId = this.mood.varietyId
				this.varietyName = this.mood.varietyName
				// this.mood.slideshow = this.mood.slideshow.split(',')
				let richtext = res.data.introduce
				this.richText = richtext.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"');
				// if(this.mood.money==1280){
				// 	this.price = 268
				// 	this.priceName = '百草蜜'
				// }else if(this.mood.money==13000){
				// 	this.price =3580
				// 	this.priceName = '名山蜜'
				// }else{
				// 	this.price = 598
				// 	this.priceName = '药草蜜'
				// }
			},
			
			
			
			selectBtn(num) {
				this.selectMonth = num
				if(this.selectMonth==12){
					this.number = 10
				}else{
					this.number = 20
				}
			},
			async toconfirm() {
				console.log(this.varietyId)
				let data = {
					farmId: this.id,
					scence: 2,
					orderType: 2,
					buyMonth: this.selectMonth,
					productId:this.varietyId,
					subBeehiveId:this.subBeehiveId,
					// shareId: '1701563493384400898',
					parentId:this.parentId,
					shareId: uni.getStorageSync('shareIdCode'),
					subBeehiveId: uni.getStorageSync('subBeehiveId'),
				}
				let res = await this.$api.request('pay/order/create', 'post', data)
				if (res.code == '200') {
					let mood = {
						money: this.mood.money,
						feedCost: this.mood.rearMonthMoney,
						id: this.mood.id,
						rule: this.mood.rule,
						imgId: this.mood.url,
						number: this.mood.number,
						varietyId: this.mood.varietyId,
						typeId: this.mood.typeId,
						// shareId: this.shareId,
						fosterName: this.mood.farmName,
						varietyName:this.mood.varietyName,
						BuyId: res.data,
						buyMonth:this.selectMonth
					}
					console.log(mood)
					uni.setStorageSync('adopt', JSON.stringify(mood))
					uni.navigateTo({
						url: '/pages/index/adopt/adoptshop',
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.changdi {
		width: 230rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}
	
	page {
		background-color: #e5e5e5;
	}
	
	.rixt_title {
		color: #333333;
		padding-left: 20rpx;
		padding-top: 20rpx;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}
	
	.rixt_box {
		width: 710rpx;
		height: 200rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}
	
	.img_text {
		position: absolute;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #DB5A0A;
		width: 340rpx;
		height: 60rpx;
		text-align: center;
		font-weight: 600;
	}
	
	.img_juxin {
		width: 340rpx;
		height: 60rpx;
	
		position: absolute;
	}
	
	.img_boxsun {
		width: 340rpx;
		height: 60rpx;
		position: relative;
		margin-right: 60rpx;
	}
	
	.img_box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: -50rpx;
	
	}
	
	.fosterBox {
		width: 710rpx;
		height: 400rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.swpei_box {
		width: 710rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-top: 30rpx;
	}
	
	.roundList {
		width: 90%;
		margin-top: 30rpx;
		display: flex;
		padding: 0 60rpx;
		box-sizing: border-box;
		justify-content: space-between;
		margin-left: 30rpx;
	
		.roundItem {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.roundBtn_big {
				width: 120rpx;
				height: 120rpx;
				position: relative;
	
				.roundBtn {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background: linear-gradient(0deg, #F9EAD3 0%, #F2D19B 50%, #F5D8AC 100%);
					-webkit-mask: radial-gradient(transparent, transparent 55rpx, #000 55rpx);
					mask: radial-gradient(transparent 55rpx, #000 55rpx);
					position: absolute;
					z-index: -1;
				}
	
				.roundText {
					position: absolute;
					z-index: 9999;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 45rpx;
					font-weight: bold;
					background-image: -webkit-linear-gradient(bottom, #F9EAD3, #F2D19B, #F5D8AC);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
	
	
			.tit {
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 15rpx;
				background-image: -webkit-linear-gradient(bottom, #F9EAD3, #F2D19B, #F5D8AC);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	
	.infoBox {
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		width: 710rpx;
		margin: 38rpx auto 0;
	
		.price {
			color: #D42A1B;
			font-size: 28rpx;
		}
	
		.btnGround {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
	
			.btnMonth {
				height: 50rpx;
				width: 200rpx;
				border-radius: 100rpx;
				line-height: 50rpx;
				text-align: center;
				border: 2rpx solid #F5D8AC;
				margin-right: 20rpx;
				color: #F5D8AC;
				font-size: 34rpx;
	
				&.active {
					background-image: linear-gradient(45deg, #F9EAD3, #F2D19B, #F5D8AC);
					color: #fff;
	
				}
			}
	
		}
	
		.infoItem {
			background-image: -webkit-linear-gradient(bottom, #F9EAD3, #F2D19B, #F5D8AC);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	
			.title1 {
				margin-bottom: 20rpx;
	
			}
	
			.fengmi {
				display: flex;
				align-items: center;
	
				.img {
					height: 110rpx;
					width: 110rpx;
					border: 4rpx solid #F5D8AC;
					border-radius: 50%;
					margin-right: 20rpx;
				}
	
				.miMain {
					display: flex;
					flex-direction: column;
	
	
					.kgBox {
						display: flex;
						align-items: center;
						margin-top: 15rpx;
	
						.kg {
							color: #DB5A0A;
						}
	
						.baodi {
							height: 50rpx;
							width: 120rpx;
							color: yellow;
							text-align: center;
							line-height: 50rpx;
							border-radius: 100rpx;
							color: #F5D8AC;
							border: 2rpx solid #F5D8AC;
							margin-left: 15rpx;
						}
					}
				}
			}
	
		}
	
	
	
	}
	
	.buyBox {
		padding-right: 20rpx;
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-shadow: 0rpx -5rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
	
		.buyBtn {
			height: 98rpx;
			border-radius: 100rpx;
			width: 80%;
			background: linear-gradient(-49deg, #FE471E, #D40101);
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			line-height: 98rpx;
			font-weight: bold;
		}
	}
</style>